<script>
import { ref, reactive, toRefs, watch, watchEffect, computed, onMounted } from 'vue';
export default {
    setup() {
        console.log('setup');
        //响应式变量
        const count = ref(0);
        function changeCoun() {
            count.value++
        }
        //组合式api的监听方法
        watch(count, (newValue, oldValue) => {
            console.log(newValue);
            console.log(oldValue);
        })

        const Meg = ref('guet')//返回的是一个对象
        //计算属性的组合式api
        const reverserMeg = computed(() => {//返回一个带有Value值的对象
            return Meg.value.split('').reverse().join('')//这里是需要讲对象的值取出来然后进行操作
        })
        //生命周期函数Mounted在组合式api的写法
        onMounted(() => {
            console.log('你好！这是生命周期函数mounted');
        })
        const obj = reactive({
            name: 'hzj',
            age: 21,
            child: {
                name: 'heg',
                age: 10
            }
        })
        function changeName() {
            obj.name = 'wqq'
        }
        //watchEffect可以自动收集依赖，但是需要使用响应式的属性，这里的obj是通过torefs恢复响应式的
        watchEffect(() => {
            console.log(obj.name)
        })
        //...torefs能使解构的对象恢复响应式需要引用torefs来实现
        return { changeCoun, count, ...toRefs(obj), changeName, Meg, reverserMeg }
    }
}
</script>

<template>
    <div>这是Hello组件</div>
    <span>{{count}}</span>
    <button @click="changeCoun">改变count</button>
    <h2>{{name}}</h2>
    <h2>{{child.name}}</h2>
    <button @click="changeName">改变名字</button>
    <h1>{{Meg}}</h1>
    <h1>{{reverserMeg}}</h1>
</template>

<style>

</style>